<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }

      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
      .cont p{
        display: inline;
      }
    </style>
  </head>
  <body>

    <h1>My shopping list</h1>
    <form>
      <div>
        <label for="item">Enter a new item:</label>
        <input type="text" name="item" id="item">
        <button type="button"  onclick="addItem()">Add item</button>
      </div>
    
      <ul id="ul">
        <!-- <li><span>12312</span><button  onclick="deleteTheDom()">Delete</button></li> -->
      </ul>
      <div class="cont">
        <span>购物车内的商品有：</span>
        <p id="cotent"></p>
        <button  onclick="removeAll()">清空</button>
      </div>
    </form>



    <script>
      /**
      要求：
      1、点击additem 将输入框中的文字放置列表中，并将输入框清空
      2、不允许输入空值 ，空值提示
      3、列表中的行点击delete按钮可实现删除该行
      4、刷新页面将输入框清空
      5、实现方式必须为第10章内容，dom节点可以随意添加属性
      6、截至下周二前
      **/
      var data=[];
      function addItem(){
        var itemValue = document.getElementById('item').value.trim();
        if(itemValue == ""){
          alert("输入值为空");
        }else{
          var itemArr = itemValue.split('#');
          for(var i =0;i<itemArr.length;i++){
            if(itemArr[i].trim()!==""){
              var index=data.indexOf(itemArr[i]);
              if(index < 0){
                data.push(itemArr[i]);
                add(itemArr[i].trim());
              }
            }
          }
          if(data != null){
            var cotentId = document.getElementById('cotent');
            var cotentChildNode = cotentId.childNodes;
            if(cotentChildNode != null){
              for(var y=0;y<cotentChildNode.length;y++){
                cotentId.removeChild(cotentChildNode[y]);
              }
            }
            cotentId.appendChild(document.createTextNode(data.join(',')));
          }

        }

      }
      function add(itemValue){
        var fragment = document.createDocumentFragment();
          var ul = document.getElementById('ul');
          var li = null;
          
          li = document.createElement("li");
          li.setAttribute("id",itemValue);
          li.appendChild(document.createTextNode(itemValue));

          var btn = document.createElement("button");
          btn.setAttribute("onclick","deleteTheDom("+itemValue+")");
          var textNode = document.createTextNode("delete");
          btn.appendChild(textNode);

          li.appendChild(btn);
          fragment.appendChild(li);
  
          ul.appendChild(fragment);
          document.getElementById('item').value='';
      }

      function deleteTheDom(_ob){
        //_ob指向当前节点
        var parent = document.getElementById('ul');
        var child=document.getElementById(_ob);
        var textNode = child.firstChild.nodeValue;
        parent.removeChild(child);
        data.splice(data.indexOf(textNode),1);
        var cotentId = document.getElementById('cotent');
        var cotentChildNode = cotentId.childNodes;
        if(cotentChildNode != null){
          for(var y=0;y<cotentChildNode.length;y++){
            cotentId.removeChild(cotentChildNode[y]);
          }
        }
        cotentId.appendChild(document.createTextNode(data.join(',')));
      }
      function removeAll(){
        data=[];
      }
    </script>
  </body>
</html>